<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


      const data = [
        {
          s:[100,100],
          t:[500,60]
        },{
          s:[100,120],
          t:[450,180]
        }
      ]

      const link = d3.link(d3.curveBumpX)
        .source(d=>d.s)
	      .target(d=>d.t)
        .x(d=>d[0])
        .y(d=>d[1])

      svg.selectAll('path')
        .data(data)
        .join('path')
        .attr('d',link)
        .attr('stroke','#666')  
        .attr('fill','none')

      svg.selectAll('.start')
        .data(data)
        .join('circle')
        .attr('cx',d=>d.s[0])
        .attr('cy',d=>d.s[1])
        .attr('fill','#ccc')  
        .attr('r',4)

        svg.selectAll('.end')
        .data(data)
        .join('circle')
        .attr('cx',d=>d.t[0])
        .attr('cy',d=>d.t[1])
        .attr('fill','#666')  
        .attr('r',4)  
      
    </script>
  </body>
</html>
